<template>
	<view ref="addInfo" class="detail_pop" v-show="isShowScanNumber" >
		<view  class="pop_title" style="background-color:#dbeff7;"> 扫描号码</view>

		<view style="width:100%;overflow-y:scroll;height:63vh;background-color: #f7f7f7;" >
			<u-form
				labelPosition="left"
				:model="numberForm"
				ref="infoForm"
				style="background-color:#f7f7f7;height:100%;overflow-y:auto;"
				:labelStyle='taskFormLabel'
				labelWidth="180"
			>
				<u-form-item
					label="号码:"
					prop=""
					:borderBottom="false"
					class="scroll-view-item"
				>
					<view style="width:92%;">
                        <scroll-view   :scroll-with-animation="true"  :show-scrollbar="true"  :enhanced="true"  :bounces="false" :fast-deceleration="true" scroll-y style="width:75%;height:200px;float:left;padding-right:20px;border:#ccc 1px solid;">
                        <u-input type="textarea" v-model="numberForm.nums" autocomplete="off" :border="true" placeholder="" height="200" :clearable="false" style="width:90%;float:left;" ></u-input>
                        </scroll-view>
                    </view>
				</u-form-item>

				<u-form-item
					label=""
					prop=""
					labewidth="0"
					:borderBottom="false"
					style="position:absolute;bottom:0rpx;width:100%;background-color: #f7f7f7;"
				>
					<view style="float:right;width:92%;margin-right:7%;">
						<u-button @click="handleCloseCurrentPop()" :custom-style="btnFormStyle" type="error" ><uni-icons type="submit" color="#fff" size="22"></uni-icons> 关闭</u-button>
						<u-button @click="handleSaveNumsData()" :custom-style="btnFormStyle" :loading="isSubmit" :disabled="isSubmit" type="primary" ><uni-icons type="submit" color="#fff" size="22"></uni-icons> 保存</u-button>
					</view>
				</u-form-item>
			</u-form>
		</view>
		
		<u-toast ref="uToastsAddInfo" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	
	import {
		saveAddCallOut,
		getProjectDataBySeatGroup
	} from "@/api/task.js";
	
	// import InfoSelf from "@/pages/index/infoself.vue";
	
	export default {
	    name: 'scanNumber',
	    data() {
	      return {
	        numberForm:{
	        	nums:'',
	        	seat:''
	        },
			
			taskFormLabel:{
				marginLeft:'30rpx',
				fontSize:'30rpx'
			},
			
			inputStyle:{
				fontSize:'30rpx',
				backgroundColor:'#fff'
			},
			
			btnFormStyle: {
				border: 'none',
				borderRadius: '10rpx',
				color: '#fff',
				height:'70rpx',
				padding:'20rpx 30rpx',
				margin:'0rpx',
				float:'right',
				marginLeft:'15rpx'
			},
			
			isSubmit:false, //是否点击提交按钮
	      }
	    },
		props:['isShowScanNumber','scanData'],
		computed: {
			...mapGetters(["userInfo"])
		},	
	    methods: {
			//初始化数据
			initData(){
				
				console.log("scandata",this.scanData);
				let current_data = this.scanData.data != null ? this.scanData.data : [] ;
				
				let number_data = [];
				
				if(current_data.length){
					current_data.forEach(item=>{
						let check_item = this.checkPhoneType(item);
						if(check_item != 'invalid'){
							number_data.push(item);
						}
					});
					
				}
				
				this.numberForm.nums = number_data.join("\n");
                

			},
			
			checkPhoneType(phone) {
			  if (/^1[3-9]\d{9}$/.test(phone)) {
			    return 'mobile';
			  } else if (/^(0\d{2,3}-?)?[1-9]\d{6,7}$/.test(phone)) {
			    return 'landline';
			  } else {
			    return 'invalid';
			  }
			},
			
			//保存号码 
			handleSaveNumsData(){
				let params = this.detailData;
				let _this = this;
				
				params.seat = this.userInfo.seat;
				params.pid = this.userInfo.pid;
				params.cid = this.userInfo.companyid;
					
				
				
				console.log("params",params,this.userInfo);
				
				if(params.phone == '' || params.phone == undefined){
					_this.$refs.uToastsAddInfo.show({
						title: "请输入号码！",
						type: 'error',
						duration: '2000',
					});
				}else{
					this.isSubmit = true;
				
					saveAddCallOut(params).then(res=>{
						console.log("saveAddCallOut res",res);
						
						this.isSubmit = false;
						
						if(res.data.code == 0){
							//追加数据到顶部
							// params.id = res.data.data;
							uni.$emit("appendInfoList",res.data.data);
							
							// InfoSelf.methods.handleAppendInfoList(params);
							
							setTimeout(()=>{
								uni.$emit('closeInfoPop', '');
							},2000)
							
							_this.$refs.uToastsAddInfo.show({
								title: res.data.msg,
								type: 'success',
								duration: '2000',
							});
						}else{						
							_this.$refs.uToastsAddInfo.show({
								title: res.data.msg,
								type: 'error',
								duration: '2000'
							})
						}
					});
				}
			},
			
			handleCloseCurrentPop(){
				// this.taskForm = {
				// 	remark:'',
				// 	phone_number:'',
				// 	username:'',
				// 	called:''
				// };
				
				this.$emit('closeScanPop', '');
			},
			
		},
		
		watch: {
		    isShowScanNumber(newVal, oldVal) {
		      // 监听文本框值的改变
		      console.log("addinfo watch newVal",newVal);
			  console.log("addinfo watch oldVal",oldVal);
			  
			  if(newVal){
				  // this.taskForm.phone_number = newVal.called;
				  // this.taskForm.called = newVal.called
				  
				  this.initData();
			  }
		    }
		},
		beforeDestroy(){
			this.taskForm = {
				remark:'',
				phone_number:'',
				username:'',
				called:''
			}
		}
	}
</script>

<style>	
	.detail_pop{
		width:94%;
		margin-left:3%;
		border:#ccc 1px solid;
		background-color:'#f7f7f7';
		box-shadow:10rpx 10rpx 30rpx #ccc;
		border-radius:20rpx;
		position: absolute;
		margin-top:-120rpx;
		height:65vh;
		margin-bottom:10%;
		z-index:100000;
		overflow:hidden;
		/* padding-bottom:50rpx; */
	}
	
	
	.pop_title{
		font-size:32rpx;
		width:100%;
		padding-left:2%;
		padding-right:2%;
		height:80rpx;
		font-weight: bold;
		line-height: 80rpx;
		border-bottom:#ccc 1px solid;
	}
	
	.pop_title_item{
		width:auto;
		float:left;
		padding:0 20rpx;
	}
	
	.pop_title .active{
		background-color:#589bff;
		color:#fff;
	}
</style>